import React, { ReactNode } from 'react';
import { Box, SellingCard, Text, ThemeColorType } from '@nova-hf/ui';
import { formatPrice } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ContractStatus, useContractsQuery } from 'typings/graphql';

type YourContractSettingsProps = {
  serviceId: string;
  color: ThemeColorType;
  hasTitle?: boolean;
};

const YourContractSettingsContainer = ({
  serviceId,
  color,
  hasTitle,
}: YourContractSettingsProps) => {
  const { query } = useRouter();
  const customerId = typeof query?.customerId === 'string' ? query?.customerId : '';

  const { t } = useTranslation('stillingar');
  const { data, loading, error } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  if (loading) return <Box>Hleður</Box>;
  if (error || !data?.contracts.contracts) return <Box> Þjónustuleið fannst ekki </Box>;

  const contract = data?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;

  if (
    variant?.__typename !== 'SubscriptionVariant' &&
    variant?.__typename !== 'ProvisionedSubscriptionVariant'
  )
    return (
      <Box>
        <Text variant="pLargeBold" color="black100" marginBottom={3}>
          {'Úps eitthvað fór úrskeiðis'}
        </Text>
      </Box>
    );
  return (
    <Box>
      {hasTitle && (
        <Box>
          <Text variant="pLargeBold" color="black100" marginBottom={3}>
            {t('yourContract.subtitle')}
          </Text>
        </Box>
      )}
      <Box>
        <SellingCard
          color={color}
          title={contract?.productDescription || ''}
          description={variant?.eesDataVolume || ''}
          {...(variant?.slug === 'frelsi' && {
            pill: 'Fyrirframgreitt',
          })}
          dottedShadow="none"
          priceSection={{
            price: formatPrice(variant?.monthlyCharge ?? 0),
            description: 'á mán',
          }}
          button={{
            text: t('yourContract.buttonText'),
            colorScheme: color,
            wrapper: (link: ReactNode) => (
              <Link
                href={{
                  pathname: '/beta/[customerId]/thjonustur/[serviceId]/thjonustubreyting',
                  query: { customerId: query.customerId, serviceId: query.serviceId },
                }}
                legacyBehavior
              >
                {link}
              </Link>
            ),
          }}
        />
      </Box>
    </Box>
  );
};

export default YourContractSettingsContainer;